<template>
    <fieldset>
        <legend>商品</legend>
        <h1>商品:Product</h1>
        <ul>
            <li v-for="item in productData" :key="item.id">
                <b>
                    产品名称：{{item.title}}
                </b>
                ----
                <b>
                    价格:{{item.price}}
                </b>
                ----
                <b>
                    库存:{{item.inventory}}
                </b>

                <button :disabled="item.inventory===0" @click="addCart(item)">加入购物车</button>
            </li>
        </ul>
    </fieldset>
</template>


<script>
import {mapActions,mapState} from 'vuex'

// 引入axios
import axios from 'axios'

export default{
    methods:{
        addCart(current){
            console.log(current);
            this.ADD_CART(current)
        },
        ...mapActions('product',['FETCH_PRODUCT']),
        ...mapActions('cart',['ADD_CART'])

    },
    mounted(){
        this.FETCH_PRODUCT()
    },
    computed:{
        ...mapState('product',['productData'])
    },
    created(){
        //发送一个get请求
        axios.get("/api/data /index.json",{
            headers:{},
            params:{
                name:'zzz'
            }
        })
        .then(res => { 
            console.log(res);
        })



        // post请求
        // axios.post('/api/users/login',{
        //     username:"lbw",
        //     password:"555"
        // },{
        //     headers:{
        //         nickname:'mmm'
        //     }
        // })
        // .then(res => {
        //     console.log(res);
        // })

        // 配置模式config
        axios({
            url:"/api/users/login",
            method:"post",//请求方式
            // params:{},//get请求传参方法
            data:{
                username:'admin',
                password:'admin',
            },//post请求传参方式
            headers:{},//设置请求头 
            timeout:3000,//超时设置
            withCredentials:true//携带凭据（cookie）
        })
        .then(res => {
            console.log(res);
        })

        
    }
}
</script>